import React from 'react'
import {  useLocation, useNavigate } from "react-router-dom";
import { TabBar } from "antd-mobile";
import { AppOutline, UserOutline } from "antd-mobile-icons";
function Tabbars() {
    const location = useLocation();
  const { pathname } = location;
  const navigate = useNavigate();
  const setRouteActive = (value) => {
    navigate(value);
  };
  const tabs = [
    {
      key: "/home",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/my",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  return (
    <div
        style={{
          width: "100%",
          height: "50px",
          background: "#ccc",
          position: "fixed",
          left:0,
          bottom:0
        }}
      >
        <TabBar
          activeKey={pathname}
          onChange={(value) => setRouteActive(value)}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
  )
}

export default Tabbars
